<template>
  <div class="index">
    <!-- <header>
      <div class="filter-part" style="position: relative;"> -->
    <Row>
      <Col :xs="24">
        <div class="margin-up-down">
          <Select v-model="filterObj.mechanismId" filterable :key="filterObj" style=" width: 220px;" placeholder="请选择所属药店">
            <Option value="all" key="all">全部</Option>
            <Option v-for="item in hospitalList" :value="item.id" :key="item.id">{{ item.orgName }}</Option>
          </Select>
        </div>
        <div class="margin-up-down">
          <DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" placeholder="请选择申请日期" separator='至' style="width: 200px"></DatePicker>
        </div>
        <div class="margin-up-down">
          <i-input class="input" v-model.trim="filterObj.orderNumber" placeholder="请输入订单号" style=" width: 220px;"></i-input>
        </div>
        <div class="margin-up-down">
          <i-input class="input" v-model.trim="filterObj.rxCode" placeholder="请输入处方号" style=" width: 220px;"></i-input>
        </div>       
        <div class="margin-up-down">
          <i-input class="input" v-model.trim="filterObj.name" placeholder="请输入客户姓名" style=" width: 220px;"></i-input>
        </div>
        <div class="margin-up-down">
          <i-select class="select" style="width: 220px;" v-model.trim="filterObj.takeMedicineType" :key="filterObj" placeholder="请选择配送类型">
            <i-option :value="null">全部</i-option>
            <i-option :value="0">药店自取</i-option>
            <i-option :value="1">物流配送</i-option>
          </i-select>
        </div>
        <div class="margin-up-down">
          <i-select class="select" v-model.trim="filterObj.distributionStatus" :key="filterObj" style=" width: 220px;" placeholder="请选择处方状态">
            <i-option :value="null">全部</i-option>
            <Option v-for="item in zhuangtai" :value="item.dictValue" :key="item.dictValue">{{ item.dictName }}</Option>
          </i-select>
        </div>
        <div class="margin-up-down">
          <i-button style="width:51px;height:35px;" type="primary" icon="ios-search" @click="handleSearch"></i-button>
          <i-button style="width:51px;height:35px;" @click="handleReset('forms')" icon="icon-gengxin">
            <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
          </i-button>
        </div>
      </Col>
    </Row>
    <!-- </header> -->
    <!-- 列表 -->
    <div class="table">
      <Table
        size="small"
        :columns="columns"
        :data="data1"
        @on-selection-change="selectChange"
        :loading="loading"
        no-data-text="未查询到符合条件的记录"
        border
        stripe
      >
      </Table>
      <div class="page">
            <Page :total="count" :current='filterObj.page' :page-size="filterObj.size" show-total show-elevator @on-change="loadPage"/>
        </div>
    </div>
  </div>
</template>

<script>
// 最终审核状态  0:诊疗中,1:驳回 2:待审核,3,待复审,4:待支付,5:待取药,6:待配送,7:待收货,8:已完成,9:已作废,10:无效处方,11已退费,12审核中,13超时未支付。',
// towStatus -1未审核 0驳回 1通过
const filterObj = {
  size: 10,
  page: 1,
  rxCode: null,
  name: null,
  takeMedicineType: null,
  orderNumber: null,
  time: [],
  distributionStatus: null
};
import api from "@/api/commonApi";
import Utils from "@/utils";
import { DatePicker } from "view-design";
export default {
  name: 'index',
  components: {
    DatePicker
  },
  created () {
    let breadList = [
      {path: "/index", title: "首页"},
      {
        path: "",
        title: "处方管理"
      },
      {
        path: "/index/operation/prescriptionmanage/ordersearch/list",
        title: "药店订单查询"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  data () {
    return {
      filterObj: this.deepClone(filterObj),
      count: 0,
      loading: false,
      hospitalList: [],
      zhuangtai: [
        {dictName: '待支付', dictValue: 4},
        {dictName: '待取药', dictValue: 5},
        {dictName: '待配送', dictValue: 6},
        {dictName: '待收货', dictValue: 7},
        {dictName: '已完成', dictValue: 8},
        {dictName: '无效处方', dictValue: 10},
        {dictName: '已退费', dictValue: 11},
        {dictName: '超时未支付', dictValue: 13}
      ],
      columns: [
        { type: "sum", title: "排序", width: 80, align: "center",
          render: (h, params) => {
              let sum = (this.filterObj.page-1)*this.filterObj.size + params.index +1;
              return h("span", sum);
          }
        },
        { title: "订单号", key: "orderNumber", align: "center" },
        { title: "处方号", key: "rxIdStr", align: "center" },
        { title: "客户姓名", key: "name", align: "center" },
        { title: "订单金额", key: "amt", align: "center" },
        {
          title: "支付方式",
          key: "tradingChannels",
          align: "center",
          render: (h, params) => {
            return '微信支付';
          }
        },
        { title: "支付时间", key: "notifyTime", align: "center" },
        { title: "订单来源", key: "hospitalName", align: "center" },
        {
          title: "配送类型",
          key: "distributionType",
          align: "center",
          render: (h, params) => {
            let status = params.row.takeMedicineType;
            switch (parseInt(status)) {
              case 0:
                return '药店自取';
              case 1:
                return '物流配送';
            }
          }
        },
        {
          title: "订单状态",
          key: "distributionStatus",
          align: "center",
          render: (h, params) => {
            let status = params.row.distributionStatus;
            switch (parseInt(status)) {
              case 4:
                return '待支付';
              case 5:
                return '待取药';
              case 6:
                return '待配送';
              case 7:
                return '待收货';
              case 8:
                return '已完成';
              case 10:
                return '无效处方';
              case 11:
                return '已退费';
              default:
                return '超时未支付';
            }
          }
        },
        { title: "所属药店", key: "pharmacyName", align: "center" },
        {
          title: "设置",
          key: "iOperate",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.handleDetail(params);
                    }
                  }
                },
                "查看详情 "
              )
            ]);
          }
        }
      ]
    }
  },
  mounted() {
    this.ordersSearchPage();
    this.getMechanismreg()
  },
  methods: {
    //获取药店
    getMechanismreg() {
      let params = {
        hospitalType: 2
      };
      this.$axios.post(api.findKbaoHospitalRegisterDtoPage, params).then(res => {
        if (res.data.code) {
          this.hospitalList = res.data.object;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    handleSearch() {
      // 搜索
      this.filterObj.page = 1;
      this.ordersSearchPage();
    },
    handleReset() {
      // 重置
      this.filterObj = this.deepClone(filterObj);
      this.ordersSearchPage();
    },
    loadPage(index) {
      // 分页
      this.filterObj.page = index;
      this.ordersSearchPage(this.filterObj.page);
    },
    handleDetail(record) {
      // 查看详情
      if (record.row.distributionStatus === 0 || record.row.distributionStatus === 1 || record.row.distributionStatus === 2 || record.row.distributionStatus === 3) {
        return this.$Message.error("无订单详情");
      }    
      if (record.row.takeMedicineType === 0) {
        this.functionJS.queryNavgationTo(this, "/index/prescription/ordersearch/review",{id: record.row.id});
      } else {
        // this.functionJS.queryNavgationTo(this, "/index/operation/prescriptionmanage/ordersearch/logistics/" + record.row.id);
        this.functionJS.queryNavgationTo(this, "/index/prescription/ordersearch/logistics", {id: record.row.id});
      }
    },
    ordersSearchPage() {
      const reqData = this.deepClone(this.filterObj);
      reqData.minData = Utils.getNowDateBySpecialFormat(this.filterObj.time[0]);
      reqData.maxData = Utils.getNowDateBySpecialFormat(this.filterObj.time[1]);
      this.loading = true;
      this.$axios
        .post(api.drugprescription, reqData)
        .then(res => {
          this.loading = false;
          if (res.data.code === 1) {
            let ret = res.data.object.records;
            this.count = res.data.object.total;
            this.data1 = ret;
          } else {
            this.$Message.error("请求异常");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
      this.ordersSearchPage();
    }
  }
};
</script>

<style lang="less" scoped>
  .index{
    width: 100%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    min-height: 600px;
    .margin-up-down {
      display: inline-block;
      margin-top: 10px;
    }
    header {
      width: 100%;
      .filter-part {
        display: flex;
        flex-wrap: wrap;
        .filter-item {
          display: flex;
          margin: 10px 10px 10px 0;
          label {
            white-space: nowrap;
            line-height: 32px;
            width: 84px;
            text-align: right;
          }
          .input {
            width: 220px;
          }
          .select {
            width: 120px;
          }
        }
        .filter-btn-group {
          margin: 10px 10px 10px 0;
          flex: 0 0 auto;
        }
      }
      .fun-part {
        margin-top: 15px;
        margin-bottom: 10px;
        a {
          vertical-align: bottom;
        }
      }
    }
    .table {
      margin-top: 15px;
      .page-wrapper {
        display: flex;
        // margin-top: 20px;
        justify-content: space-between;
        .des {
          display: flex;
          align-items: center;
          .select {
            width: 50px;
          }
        }
      }
    }
    .page {
            width: 100%;
            margin: 20px 0;
            text-align: center;
        }
  }
</style>
